import Nerv from "nervjs";
import Taro, { getStorageSync as _getStorageSync, setNavigationBarTitle as _setNavigationBarTitle, getImageInfo as _getImageInfo, setStorage as _setStorage } from "@tarojs/taro-h5";
import { View, Image, Swiper, SwiperItem, RichText } from '@tarojs/components';
import { localHeroData, windowWidth, request } from '../../utils';
import { AtActivityIndicator } from 'taro-ui';
import './heroDetail.scss';
import HeroType from '../index/components/HeroType';
import { Config } from '../../Config';
import HeroSkillList from './components/HeroSkillList';
import { AtIcon } from 'taro-ui';
export default class Herodetail extends Taro.Component {
  constructor() {
    super(...arguments);
    this.state = {
      storageDetail: _getStorageSync(`heroDetail${this.$router.params.ename}`)
    };
  }
  componentWillMount() {}
  componentDidMount() {
    const ename = Number(this.$router.params.ename);
    const { all: heroList } = localHeroData.all;
    const hero = heroList.find(h => h.ename === ename);
    this.setState({
      hero
    });
    _setNavigationBarTitle({
      title: hero ? hero.cname : '英雄介绍'
    });
  }
  componentWillUnmount() {}
  componentDidShow() {}
  componentDidHide() {}
  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  // config: Config = {
  //   navigationBarTitleText: '英雄介绍',
  // };
  render() {
    const { hero, storageDetail } = this.state;
    return <Main hero={hero} storageDetail={storageDetail} />;
  }
}

class Main extends Taro.Component {
  render() {
    const props = this.props;

    const { hero, storageDetail } = props;
    const [swiperHeight, setSwiperHeight] = Taro.useState();
    const [swiperCurrent, setSwiperCurrent] = Taro.useState(0);
    const [heroDetail, setHeroDetail] = Taro.useState(storageDetail);
    const [storyVisible, setStoryVisible] = Taro.useState(false);
    function culSwiperHeight(thiHero) {
      if (thiHero) {
        _getImageInfo({
          src: thiHero.hero_skin[0].img,
          success: res => {
            if (res.errMsg === 'getImageInfo:ok') {
              setSwiperHeight(res.height * windowWidth / res.width);
            }
          }
        });
      }
    }
    async function getDetail(thiHero) {
      if (thiHero) {
        const res = await request(Config.获取王者荣耀英雄详情, {
          ename: thiHero.ename
        });
        setHeroDetail(res);
        _setStorage({
          key: `heroDetail${thiHero.ename}`,
          data: res
        });
      }
    }
    Taro.useEffect(() => {
      culSwiperHeight(hero);
      getDetail(hero);
    }, [hero]);
    function handleSwiperChange(event) {
      setSwiperCurrent(event.detail.current);
    }
    if (hero !== undefined) {
      return <View className="Herodetail">
        {swiperHeight ? <Swiper className="Herodetail-Cover" style={{
          height: swiperHeight
        }} onChange={handleSwiperChange}>
            {hero.hero_skin.map(skin => <SwiperItem key={skin.name}>
                <View className="Herodetail-Cover-Skin">
                  <Image className="Herodetail-Cover-Skin-Image" src={skin.img} />
                  <View className="Herodetail-Cover-Skin-Show">
                    <Image className="Herodetail-Cover-Skin-Show-Image" src={skin.smallSkinImg} />
                    <View className="Herodetail-Cover-Skin-Show-Name">{skin.name}</View>
                  </View>
                </View>
              </SwiperItem>)}
          </Swiper> : <View className="Herodetail-Loading">
            <AtActivityIndicator mode="center"></AtActivityIndicator>
          </View>}

        {!storyVisible && <View className="Herodetail-Detail">
            <View className="Herodetail-HeroName-Outer">
              <View className="Herodetail-HeroName">{hero.cname}</View>

              {hero.new_type === 1 && <View className="Herodetail-New">新</View>}
            </View>
            <View className="Herodetail-TypeAndStory">
              <HeroType type={hero.hero_types[0]} />
              <View className="Herodetail-TypeAndStory-Story" onClick={setStoryVisible.bind(this, true)}>
                英雄故事<AtIcon value="chevron-right" size="15" color="#fff"></AtIcon>
              </View>
            </View>
            {heroDetail ? <HeroSkillList skillList={heroDetail.skillList} /> : <AtActivityIndicator mode="center" customStyle={{ marginTop: '20px' }}></AtActivityIndicator>}
          </View>}

        {storyVisible && <View className="Herodetail-Story">
            <AtIcon className="Herodetail-Story-Close" value="close-circle" size="35" color="#fff" onClick={setStoryVisible.bind(this, false)}></AtIcon>
            <RichText nodes={heroDetail && heroDetail.story}></RichText>
          </View>}
      </View>;
    } else return null;
  }

}